<template>
  <div class="w-100%">
    <el-badge :value="ruleData?.rule?.length" class="w-100%">
      <el-button type="primary" plain class="w-100%" @click="showDialogVisible()">{{ buttonText }}</el-button>
    </el-badge>
    <el-dialog v-model="dialogVisible" title="表单数据" width="1200px" top="5vh" draggable>
      <fc-designer ref="fc" left-width="280px" :config="config" height="75vh" :default-value="modelValue"></fc-designer>
      <template #footer>
        <div class="text-center">
          <el-button type="primary" class="w-200px" @click="onSubmit()">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'FcDesignerInput',
  props: {
    buttonText: {
      type: String,
      default: '选择表单数据'
    },
    modelValue: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      ruleData: this.modelValue,
      dialogVisible: false,
      config: {
        autoActive: true,
        fieldReadonly: false,
        showSaveBtn: true,
        showFormConfig: false
      }
    }
  },
  mounted() {},
  methods: {
    showDialogVisible() {
      this.dialogVisible = true
    },
    onSubmit() {
      this.ruleData = this.$refs.fc.get()
      this.$emit('update:modelValue', this.ruleData)
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped></style>
